<template>
    <view class="container" :style="{ display: visible ? 'block' : 'none' }">
        <header-bar v-show="!selectType" :config="config" @rightClick="rightClick"></header-bar>
        <header-bar-select v-show="selectType" :config="config1"></header-bar-select>
        <search-bar :placeholderText="placeholderText" @searchFn="searchFn" :actions="actions" @actionFn="filterOpen">
        </search-bar>
        <view class="main">
            <customerList ref="customerList" :height="listHeight" :selectType="selectType"></customerList>
        </view>
        <uni-drawer :width="320" ref="showRight" mode="right" :mask-click="true">
            <view class="drawer-view">
                <scroll-view class="drawer-scroll" scroll-y="true">
                    <view v-if="false" class="filter-item select-item touch" @click="selectDepartment">
                        <text class="label">所属部门</text>
                        <text class="value">{{ depatment ? depatment : "请选择" }}</text>
                        <uni-icons type="arrowright"></uni-icons>
                    </view>
                    <view class="filter-item select-item touch" @click="selectCity">
                        <text class="label">选择地区</text>
                        <text class="value">{{ regionName ? regionName : "请选择" }}</text>
                        <uni-icons type="arrowright"></uni-icons>
                    </view>
                    <view class="filter-item tag-item" v-if="!isSelect">
                        <text class="label">订货账号状态</text>
                        <view class="tags">
                            <text
                                class="tag-item"
                                v-for="(item, index) in statuslist"
                                :key="index"
                                @click="selectStatusFn(item)"
                                :class="status == item.Key ? 'selected' : ''"
                                >{{ item.Value }}</text
                            >
                        </view>
                    </view>
                    <view class="filter-item tag-item">
                        <view class="label"> 客户等级 </view>
                        <view class="tags">
                            <text
                                class="tag-item"
                                @click="selectedGradesFn(item)"
                                :class="selectedGrades.includes(item) ? 'selected' : ''"
                                v-for="(item, index) in grades"
                                :key="index"
                                >{{ item.Name }}</text
                            >
                        </view>
                    </view>
                    <view class="filter-item tag-item" v-if="taglist && taglist.length > 0">
                        <text class="label">客户标签</text>
                        <view class="tags">
                            <text
                                class="tag-item"
                                @click="selectedTagFn(item)"
                                :class="selectedtaglist.includes(item) ? 'selected' : ''"
                                v-for="(item, index) in taglist"
                                :key="index"
                                >{{ item.Name }}</text
                            >
                        </view>
                    </view>
                    <view class="filter-item tag-item">
                        <text class="label">客户权限</text>
                        <view class="tags">
                            <text
                                class="tag-item"
                                v-for="(item, index) in permissionList"
                                :key="index"
                                @click="selectedqxFn(item)"
                                :class="permission == item.ID ? 'selected' : ''"
                                >{{ item.Name }}</text
                            >
                        </view>
                    </view>
                </scroll-view>
                <view class="drawer-bottom-bar">
                    <button class="btn btn-reset" @click="resetFn">
                        <text>重置</text>
                    </button>
                    <button class="btn btn-set" @click="setFn">
                        <text>确定</text>
                    </button>
                </view>
            </view>
        </uni-drawer>
    </view>
</template>

<script>
import searchBar from "@/components/common/search-bar.vue"
import customerList from "@/components/customer/customer-list.vue"
import headerBarSelect from "@/components/common/header-bar.vue"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import { GetDealerGrades, GetFrameworkTree, GetStoreStatus, GetStoreTagList } from "@/service/api/store.js"
export default {
    components: {
        searchBar,
        customerList,
        headerBarSelect,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        selectType: {
            type: String,
            default: "",
        },
    },
    watch: {
        visible: {
            handler(newVal) {
                this.$nextTick(() => {
                    this.getListHeight()
                })
            },
            immediate: true,
        },
    },
    data() {
        return {
            listHeight: "",
            loadOk: false,
            actions: [
                {
                    type: "icon-shaixuan",
                    id: 1,
                },
            ],
            placeholderText: "客户名称/手机号码",
            config: {
                title: "客户列表",
                back: false,
                centerSlot: true,
                rightSlot: true,
                color: ["#ffffff"],
                statusBarFontColor: "#ffffff",
                rightBtns: [
                    {
                        id: 1,
                        type: "plusempty",
                    },
                ],
            },
            config1: {
                title: "选择客户",
                back: true,
                centerSlot: true,
                rightSlot: false,
                color: ["#ffffff"],
                rightBtns: [
                    {
                        id: 1,
                        type: "plusempty",
                    },
                ],
            },
            filterData: {},
            regionName: "",
            depatment: "",
            data: null,
            resetData: {
                keyword: "",
                provinceId: 0,
                cityId: 0,
                regionId: 0,
                streetId: 0,
                dealerGrades: "",
                tagIds: "",
                isFilterWorker: true,
                status: -1,
                customerType: 3,
            },
            status: -1,
            grades: [],
            taglist: [],
            selectedtaglist: [],
            statuslist: [],
            selectedGrades: [],
            selectedStatus: [],
            permissionList: [
                { ID: 1, Name: "我的客户" },
                { ID: 2, Name: "团队客户" },
            ],
            permission: 3,
            refresh: false,
            isSelect: false,
        }
    },
    created() {
        let mainColor = this.easyGetColor("main")
        this.config.backgroundColor = [1, mainColor]
        this.config1.backgroundColor = [1, mainColor]
    },
    mounted() {
        if (this.selectType) {
            this.isSelect = true

            this.status = "1"
            this.resetData.status = "1"
        }
        this.getDealerGrades()
        this.getStoreStatus()
        this.getStoreTagList()
    },
    onShow() {},
    methods: {
        getSelectedGrades(data) {
            let text = []
            data.forEach((e) => {
                text.push(e.Name)
            })
            return text.join(",")
        },
        selectedGradesFn(item) {
            let result = this.selectedGrades.find((e) => e.ID == item.ID)
            if (result) {
                this.selectedGrades = this.selectedGrades.filter((e) => {
                    return e.ID != item.ID
                })
            } else {
                this.selectedGrades.push(item)
            }
            this.$forceUpdate()
            console.log(this.selectedGrades)
            let dealerGrades = []
            this.selectedGrades.forEach((e) => {
                dealerGrades.push(e.ID)
            })
            this.resetData.dealerGrades = dealerGrades.join(",")
        },
        selectStatusFn(item) {
            let type = item.Key
            if (this.status == type) {
                this.status = -1
            } else {
                this.status = type
            }
            this.resetData.status = this.status
        },
        selectedTagFn(item) {
            let result = this.selectedtaglist.find((e) => e.ID == item.ID)
            if (result) {
                this.selectedtaglist = this.selectedtaglist.filter((e) => {
                    return e.ID != item.ID
                })
            } else {
                this.selectedtaglist.push(item)
            }
            this.$forceUpdate()
            let tagIds = []
            this.selectedtaglist.forEach((e) => {
                tagIds.push(e.ID)
            })
            this.resetData.tagIds = tagIds.join(",")
        },
        selectedqxFn(item) {
            this.permission = item.ID
            this.resetData.customerType = item.ID
        },
        getDealerGrades() {
            GetDealerGrades().then((res) => {
                this.grades = res.Data
            })
        },
        getStoreStatus() {
            GetStoreStatus().then((res) => {
                this.statuslist = res.Data
            })
        },
        getStoreTagList() {
            GetStoreTagList().then((res) => {
                this.taglist = res.Data
            })
        },
        //获取列表高度
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                let h = this.isSelect ? 0 : 50
                this.listHeight = e - h + "px"
                this.loadOk = true
            })
        },
        rightClick(item) {
            this.easyGoTo("/pages/customer/add")
        },
        goSearch() {},
        filterOpen() {
            this.$refs.showRight.open()
        },
        filterClose() {
            this.$refs.showRight.close()
        },
        resetFn() {
            //重置
            this.retSetDataFn()
            this.depatment = ""
            this.selectedGrades = []
            this.selectedtaglist = []
            this.status = -1
            this.permission = 3
            this.resetData.dealerGrades = ""
            this.resetData.tagIds = ""
            this.resetData.provinceId = 0
            this.resetData.cityId = 0
            this.resetData.regionId = 0
            this.resetData.streetId = 0
            this.resetData.status = -1
            this.resetData.customerType = 3
            this.setFn()
        },
        setFn() {
            this.filterClose()
            this.$refs.customerList.refresh(this.resetData)
        },
        retSetDataFn() {
            this.data = JSON.parse(JSON.stringify(this.resetData))
            this.regionName = ""
        },
        selectCity() {
            if (!this.data) {
                this.retSetDataFn()
            }
            uni.navigateTo({
                url: "/pages/select/select-city?data=" + encodeURIComponent(JSON.stringify(this.data)) + "&type=1",
                events: {
                    getSelectData: (data) => {
                        console.log(data)
                        if (data) {
                            this.data = data
                            this.resetData.provinceId = data.ProvinceId
                            this.resetData.cityId = data.CityId
                            this.resetData.regionId = data.AreaId
                            this.resetData.streetId = data.StreetId
                            this.regionName = data.regionName
                        }
                    },
                },
            })
        },
        selectDepartment() {
            uni.navigateTo({
                url: "/pages/select/select-department",
                events: {
                    getSelectData: (data) => {
                        console.log(123123)
                        console.log(data)
                        if (data) {
                            this.depatment = data.name
                            console.log(this.depatment)
                        }
                    },
                },
            })
        },
        searchFn(key) {
            console.log(key)
            this.resetData.keyword = key
            this.$refs.customerList.refresh(this.resetData)
        },
    },
}
</script>

<style lang="scss"></style>
